<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>首页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/iconfont/iconfont.css">
</head>

<body>
  <a href="./search.html">
    <div class="home__search">
      <i class="icon iconfont icon-icon-"></i>
      <span>超星发现</span>
    </div>
  </a>
  <!-- <div class="mask">

  </div> -->
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./img/qq.png" alt="">
      </div>
      <div class="swiper-slide">
        <img src="http://img2.imgtn.bdimg.com/it/u=2018596274,165539118&fm=200&gp=0.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="http://img2.imgtn.bdimg.com/it/u=2018596274,165539118&fm=200&gp=0.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-pagination banner__pagination"></div>

  <div class="home__curriculum clear ">
    <div class="l">
      <span>研修课程</span>
      <img src="./img/room.png" alt="" class="img">
    </div>
    <div class="r">
      <ul>
        <li>信息技术</li>
        <li>师德师风</li>
        <li>职教理论</li>
        <li>专业知识</li>
        <li>专业能力</li>
        <li>管理能力</li>
      </ul>
    </div>
  </div>

  <div class="home__resources home--wrap clear">
    <div class="l">
      <span>教研资源</span>
      <img src="./img/zy.png" alt="">
    </div>
    <div class="r">
      <ul>
        <li>图书</li>
        <li> 期刊 </li>
        <li>专题</li>
      </ul>
    </div>
  </div>

  <div class="home__resources home--wrap clear">
    <div class="l">
      <span>直通大赛</span>
      <img src="./img/trophy.png" alt="">
    </div>
    <div class="r">
      <ul class="two">
        <li>我要报名</li>
        <li> 历年赛事 </li>
      </ul>
    </div>
  </div>
  <div class="home__resources home--wrap clear">
    <div class="l">
      <span>对话名师</span>
      <img src="./img/teacher.png" alt="">
    </div>
    <div class="r">
      <ul class="two">
        <li>专业技能</li>
        <li> 人文素养 </li>
      </ul>
    </div>
  </div>

  <div class="home__class home--wrap clear">
    <div class="l">
      <img src="./img/class.png" alt="" class="l">
      <div class="r__r">
        <div>听评课</div>
        <div>智慧教研听课评课</div>
      </div>
    </div>
    <div class="r">
      <img src="./img/class.png" alt="" class="l">
      <div class="r__r">
        <div>星速课</div>
        <div>移动微课制作工具</div>
      </div>
    </div>
  </div>

  <div class="home__nav">
    <ul id="nav">
      <li class="on">
        <i class="icon iconfont icon-home"></i>
        <div class="text">首页</div>
      </li>
      <li>
        <i class="icon iconfont icon-xiaoxi"></i>
        <div class="text">消息</div>
      </li>
      <li>
        <i class="icon iconfont icon-icon-test"></i>
        <div class="text">笔记</div>
      </li>
      <li>
        <i class="icon iconfont icon-wode"></i>
        <div class="text">我的</div>
      </li>
    </ul>

  </div>

  <script src="js/swiper.min.js"></script>
  <script src="js/StackBlur.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + ("") + '</span>';
        },
      },
    });
    $("#nav li").click(function () {
      $(this).addClass("on").siblings().removeClass("on");
    });
  </script>
</body>

</html>